小程序开发基础使用

小程序项目目录

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件	必需	作用
app.js	是	小程序逻辑
app.json	是	小程序公共配置
app.wxss	否	小程序公共样式表

一个小程序页面由四个文件组成，分别是：

文件类型	必需	作用
js	是	页面逻辑
wxml	是	页面结构
json	否	页面配置
wxss	否	页面样式表

WXML 标签语言

小程序的 WXML 语言提供各种页面标签。下面，对 home.wxml 改造一下，加上两个最常用的标签。

<view>
  <text>hello world</text>
</view>

上面的代码用到了两个标签：<view> 和 <text>

<view> 标签表示一个区块，用于跟其他区块分隔，类似 HTML 语言的 <div> 标签。 <text> 表示一段行内文本，类似于 HTML 语言的 <span> 标签，多个 <text> 标签之间不会产生分行。

注意，每个标签都是成对使用，需要有闭合标记，即标签名前加斜杠表示闭合，比如 <view> 的闭合标记是 </view>。如果缺少闭合标记，小程序编译时会报错。

项目配置文件 app.json

参考资料完整的的配置项目参考官方文档

顶层的 app.json 文件用于整个项目的配置，对于所有页面都有效。

app.json 文件的内容，至少必须有一个 pages 属性，指明小程序包含哪些页面。

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
}

上面代码中，pages 属性是一个数组，数组的每一项就是一个页面。这个示例中，小程序有两个个页面

1、所有页面都放在 pages 子目录里面。

2、每个页面有一个自己的目录，例如这里是 pages 下面的 logs 子目录，表示这个页面叫做 logs。页面的名字可以随便起，只要对应的目录确实存在即可。

3、小程序会加载页面目录 pages/logs 里面的 logs.js 文件，.js 后缀名可以省略，所以完整的加载路径为 pages/logs/logs。 logs.js 这个脚本的文件名也可以随便起，但是习惯上跟页面目录同名。

除了前面提到的必需的 pages 属性，app.json 文件还有一个 window 属性，用来设置小程序的窗口。window 属性的值是一个对象，其中有三个属性很常用。

navigationBarBackgroundColor：导航栏的颜色，默认为#000000（黑色）。
navigationBarTextStyle：导航栏的文字颜色，只支持black（黑色）或white（白色），默认为white。
navigationBarTitleText：导航栏的文字，默认为空。

下面，改一下前面的 app.json，加入 window 属性。

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ff0000",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "小程序 Demo"     
  }
}

上面代码中，window 属性设置导航栏的背景颜色为红色（#ff0000），文本颜色为白色（white），标题文字为"小程序 Demo"。

总体样式 app.wxss

微信小程序允许在顶层放置一个 app.wxss 文件，里面采用 CSS 语法设置页面样式。这个文件的设置，对所有页面都有效。

注意，小程序虽然使用 CSS 样式，但是样式文件的后缀名一律要写成 .wxss

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

实际开发中，直接对 <text> 标签设置样式，会影响到所有的文本。一般不这样用，而是通过 class 属性区分不同类型的文本，然后再对每种 class 设置样式。

局部样式

<!--index.wxml-->
<view>
  <text class="title">hello world</text>
</view>

首先，在 pages/index 目录里面，新建一个 index.wxss 文件（注意要把顶层的 css 文件的影响部分注释掉）

里面写上

/**index.wxss**/
.title {
  font-size: 24pt;
  color: blue;
}

会发现变成了如下这样

而 page 每个目录里面的样式文件只对自己所在页生效

Flex 布局

各种页面元素的位置关系，称为布局（layout），小程序官方推荐使用 Flex 布局。

<!--index.wxml-->
<view>
  <text class="title">hello world</text>
</view>

下面演示如何通过 Flex 布局

/**index.wxss**/
page {
  height: 100%;
  /* 注意，这里单位是 rpx，而不是 px。
     rpx 是小程序为适应不同宽度的手机屏幕，而发明的一种长度单位。
     不管什么手机屏幕，宽度一律为 750rpx。
     它的好处是换算简单，如果一个元素的宽度是页面的一半，只要写成 width: 375rpx; 即可。 */
  width: 750rpx;
  /* 整个页面（page）采用 Flex 布局 */
  display: flex;
  /* 页面的一级子元素（这个示例是<view>）水平居中 */
  justify-content: center;
  /* 页面的一级子元素（这个示例是<view>）垂直居中。一个元素同时水平居中和垂直中央，就相当于处在页面的中央了 */
  align-items: center;
}

.title {
  font-size: 24pt;
  color: blue;
}

这个样式效果

脚本编程

数据绑定

小程序提供了一种特别的方法，让页面可以更方便地使用脚本数据，叫做"数据绑定"（data binding）。

所谓 "数据绑定"，指的是脚本里面的某些数据，会自动成为页面可以读取的全局变量，两者会同步变动。也就是说，脚本里面修改这个变量的值，页面会随之变化；反过来，页面上修改了这段内容，对应的脚本变量也会随之变化。这也叫做 MVVM 模式。

下面看一个例子。打开 index.js 文件，改成下面这样。

Page({
  data: {
    name: '张三'
  }
})

上面代码中，Page() 方法的配置对象有一个 data 属性。这个属性的值也是一个对象，有一个 name 属性。数据绑定机制规定，data 对象的所有属性，自动成为当前页面可以读取的全局变量。也就是说，index 页面可以自动读取 name 变量。

接着，修改 index.wxml 文件，加入 name 变量。

<view>
  <text class="title">hello {{name}}</text>
</view>

显示效果如下：

上面代码中，name 变量写在 { { ... } } 里面。这是小程序特有的语法，两重大括号表示，内部不是文本，而是 JavaScript 代码，它的执行结果会写入页面。因此，{ {name} } 表示读取全局变量 name 的值，将这个值写入网页。

注意，变量名区分大小写，name 和 Name 是两个不同的变量名。

全局数据

数据绑定只对当前页面有效，如果某些数据要在多个页面共享，就需要写到全局配置对象里面。

打开 app.js，改写如下。

App({
  globalData: {
    now: (new Date()).toLocaleString()
  }
})

上面代码中，App() 方法的参数配置对象有一个 globalData 属性，这个属性就是我们要在多个页面之间分享的值。事实上，配置对象的任何一个属性都可以共享，这里起名为 globalData 只是为了便于识别。

然后，打开 index.js，改成下面的内容，在页面脚本里面获取全局对象。

const app = getApp();

Page({
  data: {
    now: app.globalData.now
  }
})

最后，修改一下页面代码 index.wxml。

<!--index.wxml-->
<view>
  <text class="title">现在是 {{now}}</text>
</view>

效果如下

事件

参考资料官方文档事件

事件是小程序跟用户互动的主要手段。小程序通过接收各种用户事件，执行回调函数，做出反应。

小程序的常见事件有下面这些。

tap：触摸后马上离开。
longpress：触摸后，超过 350ms 再离开。如果指定了该事件的回调函数并触发了该事件，tap事件将不被触发。
touchstart：触摸开始。
touchmove：触摸后移动。
touchcancel：触摸动作被打断，如来电提醒，弹窗等。
touchend：触摸结束。

上面这些事件，在传播上分成两个阶段：先是捕获阶段（由上层元素向下层元素传播），然后是冒泡阶段（由下层元素向上层元素传播）。所以，同一个事件在同一个元素上面其实会触发两次：捕获阶段一次，冒泡阶段一次。

小程序允许页面元素，通过属性指定各种事件的回调函数，并且还能够指定是哪个阶段触发回调函数。具体方法是为事件属性名加上不同的前缀。小程序提供四种前缀。

capture-bind：捕获阶段触发。
capture-catch：捕获阶段触发，并中断事件，不再向下传播，即中断捕获阶段，并取消随后的冒泡阶段。
bind：冒泡阶段触发。
catch：冒泡阶段触发，并取消事件进一步向上冒泡。

下面通过一个例子，来看如何为事件指定回调函数。打开 index.wxml 文件，改成下面的代码。

<view>
  <text class="title">hello {{name}}</text>
  <button bind:tap="buttonHandler">点击</button>
</view>

上面代码中，为页面加上了一个按钮，并为这个按钮指定了触摸事件（tap）的回调函数 buttonHandler，

bind: 前缀表示这个回调函数会在冒泡阶段触发（前缀里面的冒号可以省略，即写成 bindtap 也可以）。

回调函数必须在页面脚本中定义。打开 index.js 文件，改成下面的代码。

Page({
  data: {
    name: '张三'
  },
  buttonHandler(event) {
    this.setData({
      name: '李四'
    });
  }
});

效果如下

上面代码中，Page() 方法的参数配置对象里面，定义了 buttonHandler()，这就是 <button> 元素的回调函数。它有几个地方需要注意。

事件回调函数的参数是事件对象event，可以从它上面获取事件信息，比如事件类型、发生时间、发生节点、当前节点等等。
事件回调函数内部的 this，指向页面实例。
页面实例的 this.setData() 方法，可以更改配置对象的 data 属性，进而通过数据绑定机制，导致页面上的全局变量发生变化。

这里要强调一下，修改页面配置对象的 data 属性时，不要直接修改 this.data，这不仅无法触发事件绑定机制去变更页面，还会造成数据不一致，所以一定要通过 this.setData() 去修改

这个方法的详情参考官方文档的 Page.prototype.setData(Object data, Function callback)

动态提示 Toast

小程序提供了很多组件和方法，用来增强互动效果。比如，每次操作后，都显示一个动态提示，告诉用户操作的结果，这种效果叫做 Toast。

打开 index.js 文件，为 this.setData() 加上第二个参数。

Page({
  data: {
    name: '张三'
  },
  buttonHandler(event) {
    this.setData({
      name: '李四'
    }, 
    // 回调函数
    function () {
      wx.showToast({
        title: '操作完成',
        duration: 700
      });
    })
  }
});

上面代码中，this.setData() 方法加入了第二个参数，这是一个函数，它会在页面变更完毕后（即 this.setData() 执行完）自动调用。

这个参数函数内部，调用了 wx.showToast() 方法，wx 是小程序提供的原生对象，所有客户端 API 都定义在这个对象上面，wx.showToast() 会展示微信内置的动态提示框，它的参数对象的 title 属性指定提示内容， duration 属性指定提示框的展示时间，单位为毫秒。

再用小程序提供的 wx.showModal() 方法，制作一个对话框，即用户可以选择"确定"或"取消"。

打开 index.js 文件，修改如下。

Page({
  data: {
    name: '张三'
  },
  buttonHandler(event) {
    const that = this;
    wx.showModal({
      title: '操作确认',
      content: '你确认要修改吗？',
      success (res) {      
        if (res.confirm) {
          that.setData({
            name: '李四'
          }, function () {
             wx.showToast({
               title: '操作完成',
               duration: 700
             });
          });
        } else if (res.cancel) {
          console.log('用户点击取消');
        }
      }
    });
  }
});

注意，上面代码写的是 that.setData()，而不是 this.setData()。这是因为 setData() 方法定义在页面实例上面，但是由于 success() 回调函数不是直接定义在 Page() 的配置对象下面，this 不会指向页面实例，导致 this.setData() 会报错。解决方法就是在 buttonHandler() 的开头，将 this 赋值给变量 that，然后在 success() 回调函数里面使用 that.setData() 去调用。

小程序项目目录​

WXML 标签语言​

项目配置文件 app.json​

总体样式 app.wxss​

局部样式​

Flex 布局​

脚本编程​

数据绑定​

全局数据​

事件​

动态提示 Toast​

对话框 Modal​

References​